Core Web Vitals
https://1.bp.blogspot.com/-_EGcw4_K_Gg/X5OcdVnBt_I/AAAAAAABb-4/-x75puslh3YXxR9quzevd_YNViomCdACgCNcBGAsYHQ/s676/pet_robot_cat.png
Google が定義した軸をベースに、指定のWebサイトのユーザー体験を評価した数値。
単に Web Vitals と呼ぶこともある。
つまりCore Web Vitals の結果が悪いと言うことは、そのサイトの体験が落ちていることを示しており、連動してGoogle検索結果にも悪い影響があるということになる。
UXをベースにしたスコアリングがされているため、数字が低いということは論理的にエンドユーザーにとって体験を損ねる可能性がある状況を示している。
Google は モバイルファーストインデックス といって検索結果のランキングにモバイルでのUXを重視する手法を採用しているため、まずはモバイルでの Web Vitals の改善に取り組むことになる。 主な評価軸
メインとなるのは以下の三軸。これは Lighthouse の Performance の結果としてレポートされる。 Largest Contentful Paint
どれだけページを早く表示できるかの数値
imgタグ、videoタグ、svgタグや、CSSの background-image プロパティなどの負荷がないことが評価対象となる。
WebP を使うように変更すると劇的に数値が改善する事が多い。
Largest Contentful Paint は、ユーザーがページで最も有意義なコンテンツをどのくらい早く見ることができるかを表します。感覚的な読み込みスピードを測定し、ページ読み込みタイムラインにおいてページの主要コンテンツが読み込まれたと思われるタイミングを指します。 First Input Delay
どれだけ早くページへの入力に対応できるかの数値
読込中にブラウザのメインスレッドを占拠するようなJavascriptが実行されていないかが評価対象となる。
document.write を多用するスクリプトを書いているとハマる。
First Input Delay は、最初の入力までの遅延を表します。応答性を測定して、ユーザーが最初にページを操作しようとする場合に感じるエクスペリエンスを定量化します。 Comulative Layout Shift
どれだけ読み込み中と読み込み完了後でレイアウトにずれが起こるかの数値
読み込み途中にimgタグなどでガタツキが発生しないかが評価対象になる。
width と height を省略してレスポンシブ対応をしているようなスタイリングをするとハマりやすい。
どうやって調べるのか？
Google のスコアリングシステムに徐々に機能追加されている。
確認時点(2021-06-05) で以下の仕組みからスコアを測定し診断結果を得ることができた。
計測ツールのうち、即時に結果を得られるものは、計測時の状況に応じて 5 ~ 10 程度スコアが上下にブレる。
そのため、短期的には何度か数値の取得を行い、その中央値を参考とする必要がある。
また長期的には、継続的にスコアを取得し続け、スコアが上昇傾向にあるのか、下落傾向にあるのかという点と、スコアが大きく変動したとき、何を行ったのか、あるいは何があったのかを検知できる状態を作っておく必要がある。
おなじみのページのスコアリングシステム。
使われている仕組みはLighthouseと同じ。反映されているバージョンはページ下部から確認できる。 和訳された改善点のリストを取ったり、Google Botから見たときの評価に近いスコアを確認できるのが長所。 APIが存在しており、気軽に本番稼働中のサイトのスコア計測を自動化するために使うのにちょうどよい。
Chrome の検証にも組み込まれているスコアリングシステム。 Web Vitals の項目の検証結果を手元でとりあえず確認するのにちょうどよい。
拡張機能などによる広告ブロックの影響を反映してしまうので使用する際は覚えておくこと。
基本的に手元の環境で仮想的に帯域を絞ってスコアを計測する形になるので PageSpeed Insights の結果よりスコアが若干高い傾向にある。
改善するべきポイントとして上がってくる内容は PageSpeed Insights と同じものが指摘される。
Think with Google という調査分析部門が出している検証ツール。
ものとしてはほぼ PageSpeed Insights が出している内容とほぼ同一だが、結果はかなり抽象化されたものとなる。
レポートを受け取るにはメールアドレスを入力する必要があり、Googleのロゴの入ったPDFが手に入る。
改善提案資料として出したいときとかにちょうどよい(のかもしれない)
CrUX と略されることもある。
結果は即時的なものではなく、1ヶ月毎に集計した結果となる。
長期的にスコアの推移を確認したいときにちょうどよい。
どうやったらスコアを改善できるのか？
まずは PageSpeed Insights で結果を確認しよう
確認した結果の改善提案をもとに、対応できそうなところは片っ端から対応していこう
一度改善したら、その後は継続してスコアが落ちたりしてないかチェックする体制を整えよう。
スコアが下落したら何が原因なのか追えるようにしよう。